<!--
 * @Author: geyulan yulan.ge@seres.cn
 * @Date: 2025-02-19 11:05:14
 * @LastEditors: geyulan yulan.ge@seres.cn
 * @LastEditTime: 2025-05-28 16:08:17
 * @FilePath: /sports-wechat-c/pages/activity/index/index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <view class="activity-page">
    <image class="activity-banner" src="/static/images/banner-activity.png" mode="aspectFill"></image>
    <view class="activity-content">
      <view class="activity-title">亲子运动体验课</view>
      <view class="activity-desc">
        邀请家长和孩子一起参与运动，
        体验健康、快乐、成长的亲子时光。
      </view>
      <view class="activity-info">
        <view class="info-item">
          <text class="label">体验价：</text>
          <text class="value price">19.9元/节</text>
        </view>
        <view class="info-item">
          <text class="label">时长：</text>
          <text class="value">90分钟</text>
        </view>
      </view>
      <button class="signup-btn" @click="signup">立即报名体验</button>
    </view>
  </view>
</template>

<script>
export default {
  methods: {
    signup() {
      uni.showToast({ title: '报名成功！', icon: 'success' });
    }
  }
};
</script>

<style scoped>
.activity-page {
  min-height: 100vh;
  background: #fff;
}
.activity-banner {
  width: 100%;
  height: 400rpx;
  display: block;
}
.activity-content {
  padding: 40rpx 32rpx 0 32rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.activity-title {
  font-size: 40rpx;
  font-weight: bold;
  color: #fe925c;
  margin-bottom: 24rpx;
}
.activity-desc {
  font-size: 30rpx;
  color: #333;
  text-align: center;
  margin-bottom: 32rpx;
  line-height: 1.6;
}
.activity-info {
  width: 100%;
  margin-bottom: 40rpx;
}
.info-item {
  display: flex;
  align-items: center;
  font-size: 30rpx;
  margin-bottom: 16rpx;
}
.label {
  color: #888;
  margin-right: 12rpx;
}
.value {
  color: #333;
}
.price {
  color: #fe925c;
  font-weight: bold;
  font-size: 36rpx;
}
.signup-btn {
  width: 100%;
  background: #fe925c;
  color: #fff;
  font-size: 32rpx;
  border-radius: 8rpx;
  padding: 22rpx 0;
  margin-top: 24rpx;
}
</style>
